<template>
  <div class="content">
    <h1>注册</h1>
    <form action="#">
      <label><input placeholder="用户名" type="text"></label>
      <label><input placeholder="请输入密码" type="password"></label>
      <label><input placeholder="请确认密码" type="password"></label>
      <label><input placeholder="请输入电话号码" type="text"></label>
      <label><input placeholder="请输入学号" type="text"></label>
      <label>
        <div id="a">
          <img alt="" class="active" src="./dui.png">
        </div>
        <div>已阅读并同意<span>服务协议</span>和<span>xxx隐私保护指引</span></div>
      </label>
      <label><input type="submit" value="注册"></label>
      <label @click="navgateto()">返回登录</label>
    </form>
    <footer>
      <div class="item">
        <div><img alt="" src="./weixin.png"></div>
        <span>微信注册</span>
      </div>
      <div class="item">
        <div><img alt="" src="./qq.png"></div>
        <span>QQ注册</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
const navgateto = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  })
}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

a {
  text-decoration: none;
  color: #000;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media screen and (min-width: 599px) {
  .content {
    padding: 40px 20px !important;
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.content {
  width: 100%;
  height: 100%;
  padding: 180px 20px 80px 20px;
  display: flex;
  flex-direction: column;
}

.content h1 {
  text-align: center;
  margin-bottom: 20px;
}

.content form {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content form input {
  border: 1px solid #000;
}

.content form label:not(:nth-child(6)) {
  width: 100%;
  height: 36px;
  margin-bottom: 20px;
}

.content form label:not(:nth-child(6)) input {
  text-align: center;
  width: 100%;
  height: 100%;
  outline: none;
}

.content form label:nth-child(6) {
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  display: flex;
}

.content form label:nth-child(6) div:nth-child(1) {
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 16px;
  align-self: center;
  margin-right: 3px;
  padding: 0.5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content form label:nth-child(6) div:nth-child(1) span {
  color: blue;
}

.content form label:nth-child(5) {
  height: 36px;
  display: flex;
}

.content form label:nth-child(5) div:nth-child(1) {
  flex: 1;
}

.content form label:nth-child(5) div:nth-child(1) input {
  border-right: none;
  outline: none;
  text-align: left;
  text-indent: 10px;
}

.content form label:nth-child(5) div:nth-child(2) {
  width: 100px;
  text-align: center;
  line-height: 36px;
  border: 1px solid #000;
}

.content form label:nth-child(7) input {
  margin-top: 20px;
  height: 40px;
  font-size: 18px;
  background: blue;
  color: #fff;
}

.content form label:nth-child(8) {
  margin-top: 30px;
  text-align: right;
}

.content form label:nth-child(8) a {
  cursor: pointer;
}

.content form label:nth-child(8) a:hover {
  color: red;
}

.content footer {
  display: flex;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content footer .item {
  height: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.content footer .item > div {
  width: 40px;
  height: 40px;
}

.content footer .item > span {
  height: 20px;
}

.active {
  display: none;
}

</style>